<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>如何用Hugo搭建Gitee Pages博客站点 - 暗黑界之门</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1">
  
  <meta name="description" content="第一步、安装go环境 打开go官网下载页面https://golang.org/dl/，选择自己操作系统对应最新版本安装包安装即可。 第二步、安">
  
  <meta itemprop="name" content="如何用Hugo搭建Gitee Pages博客站点 - 暗黑界之门">
  <meta itemprop="description" content="第一步、安装go环境 打开go官网下载页面https://golang.org/dl/，选择自己操作系统对应最新版本安装包安装即可。 第二步、安">
  <meta itemprop="image" content="https://darkensun.gitee.io/img/author.jpg">
  
  
  <meta name="twitter:description" content="暗黑的深处，隐藏着通往光明之门">
  
  <link rel="shortcut icon" href="https://darkensun.gitee.io/img/favicon.ico"/>
  <link rel="apple-touch-icon" href="https://darkensun.gitee.io/apple-touch-icon.png" />
  <link rel="apple-touch-icon-precomposed" href="https://darkensun.gitee.io/apple-touch-icon.png" />
  <link rel="stylesheet" href="https://darkensun.gitee.io/highlight/styles/github.css">
  <script src="https://darkensun.gitee.io/highlight/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  
  <link rel="stylesheet" href="https://darkensun.gitee.io/font/hack/css/hack.min.css">
  <link rel="stylesheet" href="https://darkensun.gitee.io/css/style.css">
</head>

<body>
  <header>
    <div>
  <div id="imglogo">
    <a href="https://darkensun.gitee.io/"><img src='https://darkensun.gitee.io/img/logo.svg' alt="暗黑界之门" title="暗黑界之门"/></a>
  </div>
  <div id="textlogo">
    <h1 class="site-name"><a href="https://darkensun.gitee.io/" title="暗黑界之门">暗黑界之门</a></h1>
    <h2 class="blog-motto">暗黑的深处，隐藏着通往光明之门</h2>
  </div>
  <div class="navbar"><a class="navbutton navmobile" href="#" title="menu"></a></div>
  <nav class="animated">
    <ul>
      
      
      <li><a href="/">首页</a></li>
      
      <li><a href="/about">关于</a></li>
      
      
      <li>
        <form class="search" method="get" action="https://www.google.com/search">
          <div>
            <input type="text" id="search" name="q" placeholder='搜索'>
          </div>
        </form>
      </li>
    </ul>
  </nav>
</div>

  </header>
  <div id="container">
    <div id="main" class="post" itemscope itemprop="blogPost">
	<article itemprop="articleBody">
    <header class="article-info clearfix">
  <h1 itemprop="name">
      <a href="https://darkensun.gitee.io/post/first-blog/" title="如何用Hugo搭建Gitee Pages博客站点" itemprop="url">如何用Hugo搭建Gitee Pages博客站点</a>
  </h1>
  <p class="article-author">By
    
      <a href="https://darkensun.gitee.io" title="darksun">darksun</a>
    
  </p>
  <p class="article-time">
    <time datetime="2020-09-15 13:28:19 &#43;0800 CST" itemprop="datePublished">2020年09月15日</time>
  </p>
</header>

	<div class="article-content">
    
		<div class="toc-article">
			<strong class="toc-title">文章目录</strong>
      <nav id="TableOfContents">
  <ul>
    <li><a href="#第一步安装go环境">第一步、安装go环境</a></li>
    <li><a href="#第二步安装git环境">第二步、安装git环境</a>
      <ul>
        <li><a href="#第三步注册码云账户和配置gitee-pages">第三步、注册码云账户和配置Gitee Pages</a></li>
        <li><a href="#第四步下载hugo和安装hugo">第四步、下载Hugo和安装Hugo</a></li>
        <li><a href="#第五步使用hugo">第五步、使用Hugo</a></li>
        <li><a href="#第六步生成静态html文件">第六步、生成静态html文件</a></li>
      </ul>
    </li>
    <li><a href="#第七步上传html文件到gitee-pages仓库">第七步、上传html文件到Gitee Pages仓库</a></li>
  </ul>
</nav>
		</div>
    
    <h2 id="第一步安装go环境">第一步、安装go环境</h2>
<p>打开go官网下载页面<a href="https://golang.org/dl/">https://golang.org/dl/</a>，选择自己操作系统对应最新版本安装包安装即可。</p>
<h2 id="第二步安装git环境">第二步、安装git环境</h2>
<p>具体可以参考网址<a href="https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git">https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git</a></p>
<p>不会用git的朋友请自行学习补强。</p>
<h3 id="第三步注册码云账户和配置gitee-pages">第三步、注册码云账户和配置Gitee Pages</h3>
<p>码云是国内的git仓库，目前也是逐渐起步，一些大型的项目一般除了在github开源之外，也会选择在码云上面做开源仓库，比如最近很火的鸿蒙系统。官网网址<a href="https://gitee.com/">https://gitee.com/</a></p>
<p>注册好之后，参考官方介绍网址来建立Gitee Pages服务就可以了，官网介绍在这里<a href="https://gitee.com/help/articles/4136#article-header0">https://gitee.com/help/articles/4136#article-header0</a>，其实概括起来就是下面几个步骤：</p>
<ol>
<li>在个人设置那里，设置个人空间地址，起自己想要的个性空间名称。</li>
<li>新建一个公开的（必须是公开的）仓库，然后仓库名称必须和自己刚刚起的个性空间名称一致，创建仓库。</li>
<li>创建仓库后，会弹出一个页面指引，按照页面指引，进行git初始化，并且按照首次上传一个README.md文件。</li>
<li>回到仓库首页，在服务那里下拉箭头选择Gitee Pages，强制使用HTTPS，直接确定即可。</li>
</ol>
<h3 id="第四步下载hugo和安装hugo">第四步、下载Hugo和安装Hugo</h3>
<p>随便建一个目录</p>
<pre><code>git clone https://github.com/gohugoio/hugo.git
cd hugo
go install
</code></pre><p>简单三个步骤，就完成了hugo安装了，在命令行里面运行下面指令测试是否运行成功。</p>
<pre><code>hugo version
</code></pre><p>windows系统如果提示找不到命令行，那要重新检查go运行环境是不是有配置成功，全局搜索一下hugo.exe文件，把hugo.exe对应目录，配置到系统环境里的Path变量里面，然后重启一下系统再输入指令测试。</p>
<h3 id="第五步使用hugo">第五步、使用Hugo</h3>
<ol>
<li>找一个需要放置博客站点文件的目录，切换到目录后，运行指令
:    hugo new site 你的博客站点名称</li>
<li>这个命令会在当前目录下面新建一个博客站点目录，目录结构如下：</li>
</ol>
<pre><code>| archetypes
|----default.md  //使用hugo new /post/xxxx.md建立文件的使用默认建立的格式，支持变量设置
| content   //使用hugo new 建立的md页面都在这里面
| data  //暂时不清楚用途
| layouts   //博客站点主题对应的页面各要素模块html文件，如head.html，footer.html等
| resources   //暂时不清楚用途
| static    //存放静态文件，如图片，js，css文件等
| themes    //hugo主题存放目录
config.toml   //hugo serve启动对应的配置文件，不同的主题对应的配置文件各不相同
</code></pre><ol start="3">
<li>建立好博客站点之后，一般会先到hugo官方主题站点，下载一个默认的主题，官方主题网址在<a href="https://themes.gohugo.io/">https://themes.gohugo.io/</a>，不过上面主题大部分都是外国审美观念，我这边选了一个国人上传的主题，叫做hugo-pacman-theme，大家可以根据自己的审美观念下载自己喜欢的主题。找到主题后</li>
</ol>
<pre><code>cd 博客站点目录
git clone https://github.com/coderzh/hugo-pacman-theme.git themes/pacman
</code></pre><ol start="4">
<li>安装好主题之后，进入themes/pacman文件夹，把文件夹下面的layouts、static文件夹直接复制到到博客站点根目录下面，然后进入exampleSite目录，把content目录还有config.toml文件复制到博客站点根目录下面，对应文件的用途看上面的介绍。</li>
<li>根据自己的情况修改config.toml里面的配置文件，其中里面的BaseURL = &ldquo;https://自己的Gitee Pages域名/&quot;<strong>(域名后面的反斜杠一定不能少)</strong>，和Theme = &ldquo;pacman&rdquo;，<strong>这两项是必须要改的</strong>，否则会没办法正常运行，其中pacman代表的是themes/pacman主题目录，根据你主题目录名称设置，其他的参数对应的是页面上面的一些信息，自己多改几次就知道是什么作用了。</li>
<li>运行hugo serve命令，就可以启动本地的hugo应用了，会在http://localhost:1313/hugo-pacman-theme/（其他主题不是这个网址，运行hugo serve会在命令窗口出现提示）下面运行自己本地的博客站点，在浏览器访问上面的网址即可访问自己的博客站点。</li>
<li>但是目前自己博客站点上面的页面都是主题自带的页面，全新的站点，需要删除content/post文件夹下面的md文件，同时修改content文件夹下面的about.md文件，然后通过下面的命令发布自己的新的页面</li>
</ol>
<pre><code>hugo new post/页面名称.md
</code></pre><ol start="8">
<li>上面命令会在content/post下面生成“页面名称.md”文件，自己通过编辑器使用Markdown语法编辑md文件，编写自己想要发布的博客文章，如果对于Markdown语法不熟悉的朋友，建议通过相关文章补强一下相关知识。</li>
</ol>
<h3 id="第六步生成静态html文件">第六步、生成静态html文件</h3>
<ol>
<li>直接的md文件在Gitee Pages上面没办法直接使用，需要生成为html文件，hugo提供了快捷生成的命令</li>
</ol>
<pre><code>hugo -t pacman
</code></pre><ol start="2">
<li>pacman是主题的名称，运行上面指令之后，hugo会把采用pacman主题把所有的md文件编译成html文件，并且在博客根目录下面建立public文件夹进行放置。</li>
<li>生成静态html文件后，通过浏览器查看本地博客站点页面是否正确显示，如果不正确需要重新修改md文件和重新编译静态html文件</li>
</ol>
<h2 id="第七步上传html文件到gitee-pages仓库">第七步、上传html文件到Gitee Pages仓库</h2>
<pre><code>cd public
git init
git remote add origin https://gitee.com/darkensun/darkensun.git
git pull origin master --allow-unrelated-histories
git add -A
git commit -m &quot;first hugo blog commit&quot;
git push -u origin master
</code></pre><p>请自行将上面的git地址替换为自己的Gitee Pages仓库的地址，提交成功后登录码云Gitee Pages仓库，进入Gitee Pages服务页面，点击<strong>更新</strong>，这时访问自己的Gitee Pages页面即可发现博客站点已经成功搭建完毕。</p>

    
	</div>
  <footer class="article-footer clearfix">
  

<div class="article-tags">
  <span></span>
  
  <a href="https://darkensun.gitee.io/tags/hugo">Hugo</a>
  
  <a href="https://darkensun.gitee.io/tags/gitee-pages">Gitee Pages</a>
  
  <a href="https://darkensun.gitee.io/tags/blog">Blog</a>
  
</div>





<div class="article-categories">
  <span></span>
  
  <a class="article-category-link" href="https://darkensun.gitee.io/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0">技术文章</a>
  
</div>



  <div class="article-share" id="share">
    <div data-url="https://darkensun.gitee.io/post/first-blog/" data-title="如何用Hugo搭建Gitee Pages博客站点" data-tsina="0" class="share clearfix">
    </div>
  </div>
</footer>

	</article>
  

  <div id="vcomments"></div>
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src='//unpkg.com/valine/dist/Valine.min.js'></script>

  <script type="text/javascript">
    new Valine({
      el: '#vcomments' ,
      appId: 'J4jx5cRbujCgircgh4SUJIxV-gzGzoHsz',
      appKey: 'JxSgXE13sd9ktaXqUIan3KC8',
      notify: 'false',
      verify: 'false',
      avatar:'mm',
      placeholder: '说点什么吧...',
      visitor: 'true'
    });
  </script>
</div>

    <div class="openaside"><a class="navbutton" href="#" title="显示侧边栏"></a></div>
<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="隐藏侧边栏"></a></div>
<aside class="clearfix">
  

<div class="categorieslist">
  <p class="asidetitle">分类</p>
  <ul>
    
    <li><a href="https://darkensun.gitee.io/categories/%e6%8a%80%e6%9c%af%e6%96%87%e7%ab%a0" title="技术文章">技术文章<sup>1</sup></a></li>
    
  </ul>
</div>



  

<div class="tagslist">
	<p class="asidetitle">标签</p>
		<ul class="clearfix">
      
			<li><a href="https://darkensun.gitee.io/tags/blog" title="blog">blog<sup>1</sup></a></li>
      
			<li><a href="https://darkensun.gitee.io/tags/gitee-pages" title="gitee-pages">gitee-pages<sup>1</sup></a></li>
      
			<li><a href="https://darkensun.gitee.io/tags/hugo" title="hugo">hugo<sup>1</sup></a></li>
      
		</ul>
</div>



  
  <div class="archiveslist">
    <p class="asidetitle">归档</p>
    <ul class="archive-list">
      
      
      <li class="archive-list-item">
        <a class="archive-list-link" href="https://darkensun.gitee.io/post/#2020-09">2020年09月</a><span class="archive-list-count">1</span>
      </li>
      
    </ul>

  </div>


  

<div class="tagcloudlist">
  <p class="asidetitle">标签云</p>
  <div class="tagcloudlist clearfix">
    
    <a href="https://darkensun.gitee.io/tags/blog" style="font-size: 12px;">blog</a>
    
    <a href="https://darkensun.gitee.io/tags/gitee-pages" style="font-size: 12px;">gitee-pages</a>
    
    <a href="https://darkensun.gitee.io/tags/hugo" style="font-size: 12px;">hugo</a>
    
  </div>
</div>



  

</aside>
</div>

  </div>
  <footer><div id="footer" >
  <div class="line">
    <span></span>
    
    <div style='background:no-repeat url("https://darkensun.gitee.io/img/author.jpg") left top;-webkit-background-size:6.875em 6.875em;-moz-background-size:6.875em 6.875em;background-size:6.875em 6.875em;' class="author" ></div>
  </div>
  <section class="info">
    <p>人生如梦 <br/> 只在于你敢去想</p>
  </section>
  <div class="social-font clearfix">
    
  </div>
  <p class="copyright">Powered by <a href="http://gohugo.io" target="_blank" title="hugo">hugo</a> and Theme by <a href="https://github.com/coderzh/hugo-pacman-theme" target="_blank" title="hugo-pacman-theme">hugo-pacman-theme</a> © 2020
    
    <a href="https://darkensun.gitee.io/" title="暗黑界之门">暗黑界之门</a>
    
  </p>
</div>
</footer>
  <script src="https://darkensun.gitee.io/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
done = false;
$(document).ready(function(){
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  $(window).resize(function(){
    getSize();
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else
    {
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
    }
  });
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
  $('form.search').on('submit', function (event) {
    if (false === done) {
      event.preventDefault();
      var orgVal = $(this).find('#search').val();
      $(this).find('#search').val('site:https:\/\/darkensun.gitee.io\/ ' + orgVal);
      done = true;
      $(this).submit();
    }
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      h  = $('article h2')
      ah = $('article h2'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  if(ah.length==0){
    t.css('display','none');
  }else{
    c.click(function(){
      ta.css('display', 'block').addClass('fadeIn');
    });
    o.click(function(){
      ta.css('display', 'none');
    });
    $(window).scroll(function(){
      ta.css("top",Math.max(140,320-$(this).scrollTop()));
    });
  };
});
</script>

<script type="text/javascript">
$(document).ready(function(){
  var $this = $('.share'),
      url = $this.attr('data-url'),
      encodedUrl = encodeURIComponent(url),
      title = $this.attr('data-title'),
      tsina = $this.attr('data-tsina');
  var html = [
  '<a href="#" class="overlay" id="qrcode"></a>',
  '<div class="qrcode clearfix"><span>扫描二维码分享到微信朋友圈</span><a class="qrclose" href="#share"></a><strong>Loading...Please wait</strong><img id="qrcode-pic" data-src="http://b.bshare.cn/barCode?site=weixin&url=' + encodedUrl + '"/></div>',
  '<a href="#textlogo" class="article-back-to-top" title="Top"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="#qrcode" class="article-share-qrcode" title="QRcode"></a>',
  '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="http://service.weibo.com/share/share.php?title='+title+'&url='+encodedUrl +'&ralateUid='+ tsina +'&searchPic=true&style=number' +'" class="article-share-weibo" target="_blank" title="Weibo"></a>',
  '<span title="Share to"></span>'
  ].join('');
  $this.append(html);
  $('.article-share-qrcode').click(function(){
    var imgSrc = $('#qrcode-pic').attr('data-src');
    $('#qrcode-pic').attr('src', imgSrc);
    $('#qrcode-pic').load(function(){
        $('.qrcode strong').text(' ');
    });
  });
});
</script>


<link rel="stylesheet" href="https://darkensun.gitee.io/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="https://darkensun.gitee.io/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.article-content').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;
      var alt = this.alt;
      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
    });
    $(this).find('.fancybox').each(function(){
      $(this).attr('rel', 'article' + i);
    });
  });
  if($.fancybox){
    $('.fancybox').fancybox();
  }
});
</script>




</body>
</html>
